<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello vue</title>
</head>
<body>
    <div id="app"> 
        <h2>总价格：{{totalPrice}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        
        const app = new Vue({
            el: '#app',    
            data: {    
                books: [
                    {id: 110, name: 'aaa', price: 117},
                    {id: 111, name: 'bbb', price: 152},
                    {id: 112, name: 'ccc', price: 102},
                    {id: 113, name: 'ddd', price: 115}
                ]
            },
            computed: {    
                // 计算属性里有缓存，多次调用，只计算一次，性能比函数更高
                totalPrice: function () {
                    let result = 0;
                    for (let i = 0; i< this.books.length; i++) {
                        result += this.books[i].price;
                    }
                    return result;

                    // es6 还有骚操作的语法、
                    // for (let i in this.books) {
                    //     this.books[i];
                    // }
                    // for (let book of this.books) {
                    //      book
                    // }
                    
                }  
            }
        })
    </script>
</body>
</html>
